<!--  -->
<template>
  <div>
        <Card>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                <Col span="8">
                    <FormItem label="采购单">
                        <Input v-model="formItem.orderNumber" placeholder="单号/发起人手机号" clearable></Input>
                    </FormItem>
                </Col>
                <Col span="8" v-if="user_type!=='01'">
                    <FormItem label="客户">
                        <Select v-model="formItem.customerUuid" @on-change="searchCustomerChange" filterable>
                            <Option  v-for="item in moreCustomerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="机构">
                        <Input @on-focus="s_tree=true;" :disabled="!formItem.customerUuid||formItem.customerUuid=='全部'" v-model="formItem.instName" placeholder="请选择机构" readonly></Input>
                        <!-- <Select :disabled="!formItem.customerUuid||formItem.customerUuid=='全部'" v-model="formItem.inst_uuid" filterable>
                            <Option  v-for="item in moreMechanismList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                        </Select> -->
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="进度">
                        <Select v-model="formItem.state" filterable>
                            <Option  v-for="item in progressList" :value="item.state" :key="item.state">{{ item.desc }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8"  >
                    <FormItem label="所在地">
                        <Cascader change-on-select v-model="search.location" placeholder="请选择省市区" :data="areasData" ></Cascader>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="发起时间">
                        <DatePicker v-model="search.timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                    </FormItem>
                </Col>
                </Row>
            
                <Row  >
                <Col span="8" offset="16"  style="text-align:right;">
                    <Button @click="handleClickgetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                </Col>
                
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="formItem.pageNumber" :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <progressModal 
            :zhmodel="modal_progress" 
            title="进度" 
            :totalTime="progress_details.totalTime"
            :columns="modal_columns"
            :data="progress_details.data"
            @change="change"
        >
        </progressModal>
        <detailModalF 
            :width="1002"
            :zhmodel="modal_details" 
            :infor="purchase_details.infor"
            :columns="list_columns"
            :totalcolumns="total_columns"
            :remarkscolumns="remarks_columns"
            :data="purchase_details.list"
            :totallist="purchase_details.total_list"
            :remarkslist="purchase_details.remarks_list"
            tableTitle="采购清单"
            :imgsrc="look_pic_wrap.src"
            :evaluate="purchase_details.evaluate"
            @clickVoucher="lookVoucher"
            @change="detailChange"
        ></detailModalF>
        <Modal title="查看凭证" v-model="look_pic_wrap.look_pic" class="no_footer_modal">
            <p v-if="!!look_pic_wrap.desc" style="padding:15px 30px;">{{look_pic_wrap.desc}}</p>
            <img style="width:100%;" :src="look_pic_wrap.src" alt="">
        </Modal>
        <Modal title="选择机构" v-model="s_tree" @on-ok="confirmST" :mask-closable="false" >
			<div style="padding:15px 30px;">
				<Tree :data="s_tree_data"   @on-select-change="s_selectChange"></Tree>
			</div>
		</Modal>
  </div>
</template>

<script>
import accounting from 'accounting'
import progressModal from '@/components/modal/progressModal.vue'
import detailModalF from '@/components/modal/detailModal1.vue'
import util from '@/libs/util'
import {
    getBankOrg,
    getGoodsCondition,
    getGoodsDetails,
    getGoodsProgress,
    getOrgTree
} from '@/libs/get.js'
import {
    getGoodsTable,
    sendMail
} from '@/libs/post.js'
export default {
    name:'officeSupplies',
    components:{
        progressModal,
        detailModalF
    },
    data () {
        return {
            s_select_op:[],
			s_tree_data:[],
			s_tree:false,
            btn:{
                bgypin_xq:false,
                bgypin_jd:false,
                bgypin_cfyj:false
            },
            btnp:{},
            userUuid:'',
            domain:this.$store.state.app.domain,
            user_type:'',
            look_pic_wrap:{
                desc:'',
                look_pic:false,
                src:''
            },
            /**详情 */
            modal_details:false,
            copy_purchase_details:{},
            purchase_details:{
                infor:[
                    {
                        label:'采购单号',
                        value:''
                    },
                    {
                        label:'发起时间',
                        value:''
                    },
                    {
                        label:'发起人',
                        value:''
                    },
                    {
                        label:'联系电话',
                        value:''
                    },
                    {
                        label:'客户',
                        value:''
                    },
                    {
                        label:'所在地',
                        value:''
                    },
                    {
                        label:'机构',
                        value:''
                    },
                    {
                        label:'收货地址',
                        value:''
                    },
                    {
                        label:'审批人',
                        value:''
                    },
                    {
                        label:'经办人',
                        value:''
                    }
                ],
                list:[
                    {
                        type:'',
                        name:'',
                        brand:'',
                        model:'',
                        spec:'',
                        price:'',
                        purchase:'',
                        sign:'',
                        singleAmount:'',
                        sumOfMoney:''
                    }
                ],
                total_list:[
                    {
                        total:'合计',
                        singleAmount:'',
                        sumOfMoney:''
                    }
                ],
                remarks_list:[
                    {
                        remark:'备注：',
                        text:' '
                    }
                ],
                voucherImg:'',
                evaluate:{
                    skill:'',
                    speed:'',
                    service:'',
                    other:''
                }
            },
            
            remarks_columns:[
                {
                    key:'remark',
                    width:80
                },{
                    key:"text"
                }
            ],
            
            total_columns:[
                {
                    key:'total',
                    width:740,
                    align: 'center'
                },
                {
                    key:'singleAmount',
                    width:130,
                    align: 'center'
                },
                {
                    key:'sumOfMoney',
                    width:130,
                    align: 'center'
                }
            ],
            list_columns:[
                {
                    key:'type',
                    title:'类型',
                    width:100,
                    align:'center'
                },
                {
                    key:'name',
                    title:'名称',
                    width:100,
                    align:'center'
                }
                ,
                {
                    key:'brand',
                    title:'品牌',
                    align:'center',
                    width:100
                },
                {
                    key:'model',
                    title:'型号',
                    align:'center',
                    width:80
                },
                {
                    key:'spec',
                    title:'规格',
                    align:'center',
                    width:80
                },
                {
                    key:'price',
                    title:'单价（元）',
                    align:'center',
                    width:100
                },
                {
                    key:'purchase',
                    title:'采购数量',
                    align:'center',
                    width:90
                },
                {
                    key:'sign',
                    title:'签收数量',
                    align:'center',
                    width:90
                },
                {
                    key:'singleAmount',
                    title:'下单金额（元）',
                    align:'center',
                    width:130
                },
                {
                    key:'sumOfMoney',
                    title:'签收金额（元）',
                    align:'center',
                    width:130
                }
            ],
            /**进度 */
            progress_details:{
                totalTime:'',
                data:[
                ]
            },
            modal_columns:[
                {
                key:'action',
                align:'center',
                title:'操作'
                },
                {
                key:'time',
                align:'center',
                title:'时间'
                },
                {
                key:'time_consuming',
                align:'center',
                title:'耗时'
                },
                {
                key:'operator',
                align:'center',
                title:'操作人'
                }
            ],
            modal_progress:false,
            loading:true,
            total:0,
            search:{
                timeRange:[],
                location:[]
            },
            formItem:{
                orderNumber:'',
                customerUuid:'全部',
                inst_uuid:'全部',
                instName:'',
                state:'全部',
                province:'',
                city:'',
                district:'',
                startTime:'',
                endTime:'', 
                pageSize:10,
                pageNumber:1
            },
            
            moreCustomerList:[{uuid:'全部',name:'全部'}],
            moreMechanismList:[{uuid:'全部',name:'全部'}],
            progressList:[],
            areasData:this.$store.state.user.areaData ,
            columns:[
                {
                    key:'code',
                    title:'单号',
                    align:'center',
                    fixed:'left',
                    minWidth:150
                },
                {
                    key:'area',
                    title:'所在地',
                    minWidth:200
                },
                {
                    key:'customerName',
                    title:'客户',
                    minWidth:150
                },
                {
                    key:'instName',
                    title:'机构',
                    minWidth:150
                },
                {
                    key:'mobile',
                    title:'发起人手机号',
                    align:'center',
                    minWidth:120
                },
                {
                    key:'created',
                    title:'发起时间',
                    align:'center',
                    minWidth:150
                },
                {
                    key:'status_cn',
                    title:'进度',
                    minWidth:90
                },
                {
                    key:'action',
                    title:'操作',
                    align:'center',
                    minWidth:200,
                    fixed:'right',
                    render:(h,params)=>{
                        let uuid=params.row.uuid;
                        //判断是否显示某些操作按钮
                        let state=params.row.status;
                        return h('div',[
                        h('Button',{
                            props:{
                                type:'text',
                                size:'small'
                            },
                            style:{
                                color:'#2D8CF0',
                                display:this.btnp.bgypin_xq?'inline-block':'none'
                            },
                            on:{
                                click:()=>{
                                    this.getDetails(uuid);
                                    
                                }
                            }
                        },'详情'),
                        h('Button',{
                            props:{
                                type:'text',
                                size:'small'
                            },
                            style:{
                                color:'#2D8CF0',
                                display:this.btnp.bgypin_jd?'inline-block':'none'
                            },
                            on:{
                                click:()=>{
                                    this.getProgress(uuid)
                                   
                                }
                            }
                        },'进度'),
                        h('Button',{
                            props:{
                            type:'text',
                            size:'small'
                            },
                            style:{
                            color:'#2D8CF0',
                            display:this.btnp.bgypin_cfyj?state==='03'?'inline-block':'none':'none'
                            },
                            on:{
                            click:()=>{
                                this.sendMailAgain(uuid);
                            }
                            }
                        },' 重发邮件')
                        
                        ])
                    }
                }
                
            ],
            data:[]
        };
    },
    methods:{
        init(){
            let that=this;
            util.isCustomer(this);
            this.copy_purchase_details=JSON.parse(JSON.stringify(this.purchase_details));
            let timer;
			if(that.user_type!=='01'){
				timer=setInterval(()=>{
					if(that.$store.state.user.customer.length>0){
						that.moreCustomerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
						clearInterval(timer)	
					}
				},500);
			}else{
				this.searchCustomerChange(this.userUuid)	
			}
            // setTimeout(()=>{
            //     //that.areasData=that.$store.state.user.areaData;
            //     if(this.user_type!='01'){
            //         that.moreCustomerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
            //     }
                
            // },5000);
            // if(this.user_type=='01'){
            //     this.searchCustomerChange(this.userUuid)
            // }
            
        },
        async getSearchInstTree(value){
            this.formItem.inst_uuid='';
            this.formItem.instName='';
            this.s_select_op=[];
			if(value!=='全部'){
				let res=await getOrgTree(value);
				let response=res.data;
				if(response.code===200){
					this.s_tree_data=util.tree([response.data]);
				}else{
					this.$Notice.error({
						title: '获取机构失败',
						desc:response.msg
					});
				}
			}
		},
		s_selectChange(selectarr){
			this.s_select_op=selectarr;
		},
		confirmST(){
			if(this.s_select_op.length>0){
				this.formItem.inst_uuid=this.s_select_op[0].value;
				this.formItem.instName=this.s_select_op[0].title;
			}else{
				this.formItem.inst_uuid='';
				this.formItem.instName='';
			}
		},
        async getProgress(uuid){
            let res=await getGoodsProgress(uuid);
            let response=res.data;
            if(response.code===200){
                 this.modal_progress=true;
                 this. progress_details={
                    totalTime:response.data.timeDifference,
                    data:response.data.operationList.list.map(item=>{
                        return {
                            action:item.state_name,
                            time:item.created,
                            time_consuming:item.used_time,
                            operator:item.customer_name,
                        }
                    })
                }
            }else{
                this.$Notice.error({
                title: '请求出错',
                desc:response.msg
                });
            }
        },
        async getDetails(uuid){
            let res=await getGoodsDetails(uuid);
            let response=res.data;
            if(response.code===200){
                let sp='-',jb='-';
                if(!!response.data.superior&&response.data.superior.length>0){
                    response.data.superior.map(item=>{
                        if(item.approver==='审批'){
                            sp=item.name
                        }else if(item.approver==='经办'){
                            jb=item.name
                        }
                        
                    })
                }
                this.purchase_details.infor=[
                    {
                        label:'采购单号',
                        value:response.data.goodsOrder.code
                    },
                    {
                        label:'发起时间',
                        value:response.data.goodsOrder.created.slice(0,16)
                    },
                    {
                        label:'发起人',
                        value:response.data.goodsOrder.userName
                    },
                    {
                        label:'联系电话',
                        value:response.data.goodsOrder.contact_number
                    },
                    {
                        label:'客户',
                        value:response.data.goodsOrder.customerName
                    },
                    {
                        label:'所在地',
                        value:response.data.goodsOrder.area
                    },
                    {
                        label:'机构',
                        value:response.data.goodsOrder.instName
                    },
                    {
                        label:'收货地址',
                        value:response.data.goodsOrder.addr
                    },
                    {
                        label:'审批人',
                        value:sp
                    },
                    {
                        label:'经办人',
                        value:jb
                    }
                ];
                if(!!response.data.goodsOrderDetailList.list&&response.data.goodsOrderDetailList.list.length>0){
                    this.purchase_details.list=response.data.goodsOrderDetailList.list.map(item=>{
                        let a={
                            type:item.type_name,
                            name:item.name,
                            brand:item.brand,
                            model:item.type_no,
                            spec:item.spec_name,
                            price:accounting.formatMoney(accounting.unformat(item.price),'',2,','),
                            purchase:item.amounts,
                            sign:item.confirmed_amounts,
                            singleAmount:accounting.formatMoney(accounting.unformat(item.purchaseamount),'',2,','),
                            sumOfMoney:accounting.formatMoney(accounting.unformat(item.confirmedofamounts),'',2,',')
                        }
                        return a
                    });
                    this.purchase_details.total_list=[
                        {
                            total:'合计',
                            singleAmount:accounting.formatMoney(accounting.unformat(response.data.goodsOrder.total),'',2,','),
                            sumOfMoney:accounting.formatMoney(accounting.unformat(response.data.goodsOrder.confirmed),'',2,',')
                        }
                    ];
                    this.purchase_details.remarks_list=[
                        {
                            remark:'备注：',
                            text:response.data.goodsOrder.remark
                        }
                    ]
                }
                if(!!response.data.voucher.imagesUrlList){
                    this.look_pic_wrap.desc=response.data.voucher.description;
                    this.look_pic_wrap.src=this.domain+response.data.voucher.imagesUrlList[0];
                }else{
                    this.look_pic_wrap.desc='';
                    this.look_pic_wrap.src='';
                }
                if(!!response.data.score){
                    this.purchase_details.evaluate={
                        skill:response.data.score.skill_score,
                        speed:response.data.score.speed_score,
                        service:response.data.score.attitude_score,
                        other:response.data.score.content
                    }
                }else{
                    this.purchase_details.evaluate={
                        skill:'',
                        speed:'',
                        service:'',
                        other:''
                    }
                }
                
                this.modal_details=true;
            }else{
                this.$Notice.error({
                title: '请求出错',
                desc:response.msg
                });
            }
        },
        async sendMailAgain(uuid){
            let res=await sendMail(uuid);
            let response=res.data;
            if(response.code===200){
                this.$Notice.success({
                    desc:'邮件已发送'
                })
            }else{
                this.$Notice.error({
                title: '请求出错',
                desc:response.msg
                });
            }
        },
        pageSizeChange(size){
        //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        handleClickgetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=this.formItem;
            for(let key in form){
                if(form[key]==='全部'){
                form[key]='';
                }
            }
            if(!!this.search.timeRange[0]&&this.search.timeRange.length>0){
                form.startTime=util.time1(this.search.timeRange[0]);
                form.endTime=util.time1(this.search.timeRange[1]);
            }else{
                form.endTime='';
                form.startTime='';
            }
            if(this.search.location.length>0&&!!this.search.location[0]){
                form.province=this.search.location[0];
                form.city=this.search.location[1];
                form.district=this.search.location[2];
            }else{
                form.province='';
                form.city='';
                form.district='';
            }
            let res=await getGoodsTable(form);
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    
                    this.total=response.data.total;
                    this.data=response.data.rows.map(item=>{
                        item.created=item.created.slice(0,16);
                        return item
                    })
                    this.loading=false;
                }else{
                    this.$Notice.error({
                        title: '请求出错',
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 
        },
        async searchCustomerChange(value){
            this.getSearchInstTree(value)
            // if(value.length>0&&value!=='全部'){
            //     let res =await getBankOrg(value);
            //     if(res.status===200){
            //         let response=res.data;
            //         if(response.code===200){
                    
            //             this.moreMechanismList=[{uuid:'全部',name:'全部'},...response.data]
                       
            //     }else{
            //         this.$Notice.error({
            //             title: '请求出错',
            //             desc:response.msg
            //         });
            //     }
            // }else{
            //     this.$Notice.error({
            //         title: '请求失败'
            //     });
            // } 

            // }
        },
        async getSelectInfo(){
            let res=await getGoodsCondition();
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    this.progressList=[{state:'全部',desc:'全部'},...response.data.statuss];
                }else{
                    this.$Notice.error({
                        title: '请求出错',
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 

        },
        lookVoucher(){
            this.look_pic_wrap.look_pic=true;
        },
        detailChange(active){
            this.modal_details=active
        },
        change(active){
            this.modal_progress=active;
        },
    },
    watch:{
        modal_details:function(){
            if(!this.modal_details){
                this.purchase_details=JSON.parse(JSON.stringify(this.copy_purchase_details));
            }
        }
    },
    created(){
        this.init();
        this.getSelectInfo();
        this.getTable();
        this.btnp=util.bpower(this,this.btn);
    }
}

</script>
<style lang='scss' >
.ivu-date-picker{
  width:100%;
}
</style>
